<template>
    <div class="centermap">
        <div class="maptitle">
            <div class="zuo"></div>
            <span class="titletext">设备分布图</span>
            <div class="you"></div>
        </div>
        <div style="height:600px;">
            <dv-border-box-8>
                <dv-conical-column-chart :config="roomConfig" style="width:500px;height:400px;padding:0 50px;" :key="componentKey"/>
                <div style="width: 340px;margin: 0 auto;margin-top: 20px;">
                    <div style="color:rgb(4, 243, 36);float: left;margin-right: 100px;">
                        <dv-decoration-9 
                            style="width:120px;height:120px;font-weight:600;font-size: 20px;" 
                            :dur="3" 
                            :color="['#23f513', '#32a10b']">
                            {{this.equipmentOperationsNum.actuatorDdelivered}}
                        </dv-decoration-9>
                        <div style="text-align: center;margin-top:25px;font-weight:400;">执行器下发数量</div>
                    </div>
                    <div style="color:rgb(250, 12, 222);float: left;">
                        <dv-decoration-9 style="width:120px;height:120px;font-weight:600;font-size: 20px;" :dur="3" :color="['#d61bf2', '#841894']">{{this.equipmentOperationsNum.sensorReporting}}</dv-decoration-9>
                        <div style="text-align: center;margin-top:25px;font-weight:400;">传感器上报数量</div>
                    </div>
                </div>
            </dv-border-box-8>
        </div>
    </div>
</template>

<script>

import {
    floorRoomNumber,equipmentOperations
  } from "@/api/iot/device";
export default {
    data() {
        return {
            roomConfig: {
                data: [],
                img: [],
                showValue: true,
            },
            equipmentOperationsNum:{
                actuatorDdelivered : null,
                sensorReporting: null
            }
        };
    },
    created() {
        this.getData();
    },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        getData() {
            floorRoomNumber().then(response => {
                if (response.code == 200) {
                    this.roomConfig.data = response.data;
                }
            });
            equipmentOperations().then(response => {
                if (response.code == 200) {
                    this.equipmentOperationsNum = response.data;
                }  
            });
            this.componentKey++;
              // 轮询
            this.switper();
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(looper, 10000);
        },
    },
};
</script>

<style lang="scss">


.centermap {
    .maptitle {
        height: 60px;
        display: flex;
        justify-content: center;
        padding-top: 10px;
        box-sizing: border-box;

        .titletext {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: 6px;
            background: linear-gradient(92deg,
                    #0072ff 0%,
                    #00eaff 48.8525390625%,
                    #01aaff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0 10px;
        }

        .zuo,
        .you {
            background-size: 100% 100%;
            width: 29px;
            height: 20px;
            margin-top: 8px;
        }

        .zuo {
            background: url("../../assets/img/xiezuo.png") no-repeat;
        }

        .you {
            background: url("../../assets/img/xieyou.png") no-repeat;
        }
    }
}
</style>
